<template>
  <div>
    <!-- 图片区域 -->
    <img src="/static/tp/z1.png" alt="校园图" style="width: 100%; max-width: 600px; margin: 0 auto; display: block;" />

    <!-- 表单容器 -->
    <div style="position: relative; z-index: 999; padding: 20px;">
      <!-- 账号输入框 -->
      <div style="margin-bottom: 20px;">
        <label>账号*</label>
        <input
            type="text"
            v-model="username"
            style="width: 100%; padding: 1px; border: 1px solid #000; margin-top: 5px; box-sizing: border-box;"
            placeholder="请输入账号"
        />
      </div>

      <!-- 密码输入框 -->
      <div style="margin-bottom: 20px;">
        <label>密码*</label>
        <input
            type="password"
            v-model="password"
            style="width: 100%; padding: 1px; border: 1px solid #000; margin-top: 5px; box-sizing: border-box;"
            placeholder="请输入密码"
        />
      </div>

      <!-- 登录按钮 -->
      <button @click="submitLogin" style="width: 100%; padding: 10px; background: #0066cc; color: #fff; border: none; margin-bottom: 15px; box-sizing: border-box;">
        登录
      </button>

      <!-- 返回按钮 -->
      <button @click="goBack" style="width: 100%; padding: 10px; background: #999; color: #fff; border: none; box-sizing: border-box;">
        返回学生页面
      </button>
    </div>

    <p style="text-align: center; margin-top: 20px; color: #666;">成电芯伙伴提供技术支持</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const username = ref('');
const password = ref('');

const submitLogin = () => {
  if (!username.value) {
    alert('请输入账号');
  } else if (!password.value) {
    alert('请输入密码');
  } else {
    alert(`登录成功：\n账号：${username.value}`);
    uni.navigateTo({
      url: '/pages/index/shou_ye/di10',
      success: () => console.log('成功跳转到二维码领取页'),
      fail: (err) => {
        console.error('跳转二维码页失败:', err);
        alert('跳转失败，请检查页面路径是否正确');
      }
    });
  }
};

const goBack = () => {
  uni.navigateBack({
    delta: 1,
    success: () => console.log('成功返回学生页面'),
    fail: (err) => {
      console.error('返回失败:', err);
      alert('返回失败');
    }
  });
};
</script>

<style scoped>
body {
  margin: 0;
  padding: 20px;
  box-sizing: border-box;
}
</style>